<template>
	<view class="content">
		<view class="info">
			<view class="title">身份证信息</view>
			<view class="item">
				<text><text class="require">*</text>身份证正反面</text>
			</view>
			<view class="imgbox">
				<view class="imgitem">
					<image :src="info.id_card_front" mode="aspectFill" class="img" v-if="info.id_card_front"
						@tap="preview(info.id_card_front)"></image>
					<image src="../../static/img/idcard_front.png" mode="aspectFill" class="img" v-else
						@tap="chooseImage('id_front')"></image>
					<image src="../../static/img/idcard_camera.png" mode="aspectFill" class="upload"
						v-if="!info.id_card_front" @tap="chooseImage('id_front')"></image>
					<view class="tips" v-if="!info.id_card_front">上传身份证</view>
					<uni-icons type="clear" size="30" v-if="info.id_card_front" class="del"
						@tap="info.id_card_front=''"></uni-icons>
				</view>
				<view class="imgitem">
					<image :src="info.id_card_back" mode="aspectFill" class="img" v-if="info.id_card_back"
						@tap="preview(info.id_card_back)"></image>
					<image src="../../static/img/idcard_back.png" mode="aspectFill" class="img" v-else
						@tap="chooseImage('id_back')"></image>
					<image src="../../static/img/idcard_camera.png" mode="aspectFill" class="upload"
						v-if="!info.id_card_back" @tap="chooseImage('id_back')"></image>
					<view class="tips" v-if="!info.id_card_back">上传身份证</view>
					<uni-icons type="clear" size="30" v-if="info.id_card_back" class="del"
						@tap="info.id_card_back=''"></uni-icons>
				</view>
			</view>
		</view>
		<view class="cardTips">
			证件上传后请确认一下信息，如若识别有误请手动修改或直接手动填写相关信息，请认真核对！
		</view>
		<view class="info ">
			<view class="item">
				<text><text class="require">*</text>姓名:</text>
				<input type="text" class="ipt" v-model="info.name" placeholder="请输入姓名或上传证件"
					placeholder-class="input-style" />
			</view>
			<view class="item">
				<text><text class="require">*</text>身份证号:</text>
				<input type="text" class="ipt" v-model="info.id_card" placeholder="请输入身份证号或上传证件"
					placeholder-class="input-style" />
			</view>
			<view class="item">
				<text><text class="require">*</text>地址:</text>
				<input type="text" class="ipt" v-model="info.address" placeholder="请输入身份证上的地址"
					placeholder-class="input-style" />
			</view>
			<view class="item">
				<text><text class="require">*</text>证件生效期:</text>
				<picker mode="date" @change="idStart">
					<text v-if="!info.id_card_validity_start" class="input-style">请选择证件生效期</text>
					<text v-else>{{ info.id_card_validity_start }}</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</picker>
			</view>
			<view class="item">
				<text><text class="require">*</text>证件失效期:</text>
				<picker mode="date" @change="idEnd">
					<text v-if="!info.id_card_validity_end" class="input-style">请选择证件失效期</text>
					<text v-else>{{ info.id_card_validity_end }}</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</picker>
			</view>
		</view>
		<view class="info magt">
			<view class="title">驾驶证信息</view>
			<view class="item">
				<text><text class="require">*</text>驾驶证主页信息</text>
			</view>
			<view class="imgbox">
				<view class="imgitem">
					<image :src="info.driver_license" mode="aspectFill" class="img" v-if="info.driver_license"
						@tap="preview(info.driver_license)"></image>
					<image src="../../static/img/idcard_front.png" mode="aspectFill" class="img" v-else
						@tap="chooseImage('drive_front')"></image>
					<image src="../../static/img/idcard_camera.png" mode="aspectFill" class="upload"
						v-if="!info.driver_license" @tap="chooseImage('drive_front')"></image>
					<view class="tips" v-if="!info.driver_license">上传驾驶证</view>
					<uni-icons type="clear" size="30" v-if="info.img" class="del"
						@tap="info.driver_license=''"></uni-icons>
				</view>
			</view>
		</view>
		<view class="cardTips">
			证件上传后请确认一下信息，如若识别有误请手动修改或直接手动填写相关信息，请认真核对！
		</view>
		<view class="info">
			<view class="item">
				<text><text class="require">*</text>驾驶证发证机关:</text>
				<input type="text" class="ipt" v-model="info.driver_license_office" placeholder="请输入驾驶证发证机关"
					placeholder-class="input-style" />
			</view>
			<view class="item">
				<text><text class="require">*</text>驾驶证编号:</text>
				<input type="text" class="ipt" v-model="info.driver_license_number" placeholder="请输入驾驶证编号"
					placeholder-class="input-style" />
			</view>
			<view class="item">
				<text><text class="require">*</text>准驾车型:</text>
				<picker mode="selector" :range="drivelist" range-key="name" @change="changeType">
					<text v-if="!info.driver_license_type" class="input-style">请选择准驾车型</text>
					<text v-else>{{ info.driver_license_type }}</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</picker>
			</view>
			<view class="item">
				<text><text class="require">*</text>驾驶证生效期:</text>
				<picker mode="date" @change="driverStart">
					<text v-if="!info.driver_license_validity_start" class="input-style">请选择驾驶证生效期</text>
					<text v-else>{{ info.driver_license_validity_start }}</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</picker>
			</view>
			<view class="item">
				<text><text class="require">*</text>驾驶证失效期:</text>
				<picker mode="date" @change="driverEnd">
					<text v-if="!info.driver_license_validity_end" class="input-style">请选择驾驶证失效期</text>
					<text v-else>{{ info.driver_license_validity_end }}</text>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</picker>
			</view>
			<view class="item">
				<view class="drivetips">提示：证件失效时间为长期，请点击长期有效按钮</view>
				<checkbox-group @change="checkLongtime">
					<label>
						<checkbox value="cb" :checked="info.is_long==1" />长期有效
					</label>
				</checkbox-group>
			</view>
		</view>
		<view class="info magt">
			<view class="title">从业资格证</view>
			<view class="item">
				<text><text class="require">*</text>从业资格证号</text>
				<input type="text" class="ipt" v-model="info.qualification_certificate_number" placeholder="请输入从业资格证号"
					placeholder-class="input-style" />
			</view>
			<view class="item">
				<text><text class="require">*</text>从业资格证照片</text>
			</view>
			<view class="imgbox">
				<view class="imgitem">
					<image :src="info.qualification_certificate_front" mode="aspectFill" class="img"
						v-if="info.qualification_certificate_front"
						@tap="preview(info.qualification_certificate_front)"></image>
					<image src="../../static/img/idcard_front.png" mode="aspectFill" class="img" v-else
						@tap="chooseImage('seniority_front')"></image>
					<image src="../../static/img/idcard_camera.png" mode="aspectFill" class="upload"
						v-if="!info.qualification_certificate_front" @tap="chooseImage('seniority_front')"></image>
					<view class="tips" v-if="!info.qualification_certificate_front">上传照片</view>
					<uni-icons type="clear" size="30" v-if="info.qualification_certificate_front" class="del"
						@tap="info.qualification_certificate_front=''"></uni-icons>
				</view>
				<view class="imgitem">
					<image :src="info.qualification_certificate_back" mode="aspectFill" class="img"
						v-if="info.qualification_certificate_back" @tap="preview(info.qualification_certificate_back)">
					</image>
					<image src="../../static/img/idcard_back.png" mode="aspectFill" class="img" v-else
						@tap="chooseImage('seniority_back')"></image>
					<image src="../../static/img/idcard_camera.png" mode="aspectFill" class="upload"
						v-if="!info.qualification_certificate_back" @tap="chooseImage('seniority_back')"></image>
					<view class="tips" v-if="!info.qualification_certificate_back">上传照片</view>
					<uni-icons type="clear" size="30" v-if="info.qualification_certificate_back" class="del"
						@tap="info.qualification_certificate_back=''"></uni-icons>
				</view>
			</view>
		</view>
		<view class="cardTips">
			证件上传后请确认一下信息，如若识别有误请手动修改或直接手动填写相关信息，请认真核对！
		</view>
		<view class="btnbox">
			<view class="btn" @tap="submit">提交</view>
		</view>
	</view>
</template>
<script setup>
	import uploadUrl from '../../network/utils.js';
	import {
		getDriverDetail,
		saveDriverDetail
	} from '../../network/main.js';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	const info = reactive({
		id_card_front: '',
		id_card_back: '',
		name: '',
		id_card: '',
		address: '',
		id_card_validity_start: '',
		id_card_validity_end: '',
		driver_license: '',
		driver_license_office: '',
		driver_license_number: '',
		driver_license_type: '',
		driver_license_validity_start: '',
		driver_license_validity_end: '',
		is_long: 0,
		qualification_certificate_number: '',
		qualification_certificate_front: '',
		qualification_certificate_back: ''
	})
	onShow(() => {
		getDetail()
	})
	const oss = uni.getStorageSync('oss')
	const getDetail = () => {
		getDriverDetail().then(res => {
			if (res.data.data) {
				Object.assign(info, res.data.data)
			}
		})
	}
	const idStart = (e) => {
		info.id_card_validity_start = e.detail.value
	}
	const idEnd = (e) => {
		info.id_card_validity_end = e.detail.value
	}
	const driverStart = (e) => {
		info.driver_license_validity_start = e.detail.value
	}
	const driverEnd = (e) => {
		info.driver_license_validity_end = e.detail.value
	}
	const drivelist = reactive([{
		name: 'A1'
	}, {
		name: 'A2'
	}, {
		name: 'A3'
	}, {
		name: 'B1'
	}, {
		name: 'B2'
	}])
	const changeType = (e) => {
		info.driver_license_type = drivelist[e.detail.value].name
	}
	const checkLongtime = (e) => {
		info.is_long = info.is_long == 1 ? info.is_long = 0 : info.is_long = 1
	}
	const chooseImage = (type) => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			success: res => {
				upload(res.tempFilePaths[0], type);
			}
		})
	}
	const upload = (url, type) => {
		uni.uploadFile({
			url: uploadUrl.uploadUrl,
			filePath: url,
			name: 'file',
			header: {
				'token': uni.getStorageSync('token')
			},
			formData: {
				file: url
			},
			success(response) {
				let res = JSON.parse(response.data)
				if (type == 'id_front') {
					info.id_card_front = res.data.fullurl
				} else if (type == 'id_back') {
					info.id_card_back = res.data.fullurl
				} else if (type == 'drive_front') {
					info.driver_license = res.data.fullurl
				} else if (type == 'seniority_front') {
					info.qualification_certificate_front = res.data.fullurl
				} else if (type == 'seniority_back') {
					info.qualification_certificate_back = res.data.fullurl
				}
			}
		})
	}
	const preview = (url) => {
		let list = []
		list.push(url)
		uni.previewImage({
			urls: list
		})
	}
	const submit = () => {
		if (!info.driver_license_validity_end && !info.is_long) {
			uni.showToast({
				title: '请选择驾驶证失效期',
				icon: 'none'
			})
			return
		} else if (info.driver_license_validity_end && info.is_long) {
			uni.showToast({
				title: '驾驶证已选择失效期时不可选择长期有效',
				icon: 'none'
			})
			return
		}
		saveDriverDetail(info).then(res => {
			uni.showToast({
				title: '保存成功'
			})
			setTimeout(()=>{
				uni.navigateBack({
					delta:1
				})
			},300)
		})
	}
</script>

<style lang="scss">
	.content {
		padding-top: 20rpx;
		padding-bottom: 100rpx;

		.info {
			width: 100%;
			margin: 0 auto;
			padding: 0 40rpx;
			box-sizing: border-box;
			background-color: #fff;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				padding: 20rpx 0;
			}

			.item {
				width: 100%;

				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				padding: 20rpx 0;
				border-top: 2rpx solid #f7f7f7;

				.ipt {
					text-align: right;
				}

				.drivetips {
					color: #999;
					font-size: 24rpx;
					width: 400rpx;
				}

				.longtime {
					width: 140rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: #0279f6;
					border-radius: 8rpx;
					color: #fff;
					font-size: 24rpx;
				}
			}

			.imgbox {
				width: 100%;
				padding-bottom: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				position: relative;

				.imgitem {
					width: 300rpx;
					height: 196rpx;
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					justify-content: center;
					align-items: center;
					position: relative;

					.img {
						width: 100%;
						height: 100%;
						position: absolute;
						bottom: 0;
						left: 0;
					}

					.upload {
						width: 60rpx;
						height: 60rpx;
						z-index: 10;
					}

					.tips {
						font-size: 24rpx;
						color: #999;
						z-index: 10;
					}

					.del {
						position: absolute;
						top: 0;
						right: 0;
					}

				}

				.del2 {
					position: absolute;
					top: 0;
					left: 240rpx;
				}

				.face {
					width: 300rpx;
					height: 300rpx;
				}

				.facetips {
					font-size: 32rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 20rpx;
				}
			}
		}

		.magt {
			margin-top: 20rpx;
		}

		.cardTips {
			color: #fe9a44;
			font-size: 24rpx;
			width: 100%;
			margin: 0 auto;
			background-color: #fff1e6;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
		}

		.btnbox {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 60rpx;

			.btn {
				width: 600rpx;
				height: 80rpx;
				background-color: #ffc400;
				line-height: 80rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
		}
	}
</style>